<template>
	<view style="padding-bottom:50rpx;">
		<page-head :title="'预约'" :headtype="2" :gourl="`/pages/tabbar/accompany`"></page-head>
		<!-- v-if="mealid" -->
		<view class="carmsg marginAuto" v-if="acmealdata.residue_duration > 0">
			<view class="careach flex"  @click="apifun.navigate('/pages/accompany/meallist')">
				<view class="careach-title" style="font-weight:600;">陪驾套餐</view>
				<view class="careach-r flex" style="justify-content:flex-end;">
					<view class="rtxt" style="color:#999999;" v-if="!mealname">请选择陪驾套餐</view>
					<view class="rtxt ellipsis01" style="color:#333;" v-if="mealname">{{ mealname }}</view>
					<uv-icon name="arrow-right" size="16" color="#999999"></uv-icon>
				</view>
			</view>
		</view>
		<view class="carmsg marginAuto" v-if="acmealdata.residue_duration <= 0">
			<view class="careach flex"  @click="apifun.navigate('/pages/accompany/packagelist')">
				<view class="careach-title" style="font-weight:600;">暂无可用套餐</view>
				<view class="careach-r flex" style="justify-content:flex-end;">
					<view class="rtxt" style="color:#999999;">去购买</view>
					<uv-icon name="arrow-right" size="16" color="#999999"></uv-icon>
				</view>
			</view>
		</view>
		<view class="carmsg marginAuto">
			<!-- <view class="careach flex" @click="iscartype = true">
				<view class="careach-title">车型</view>
				<view class="careach-r flex" style="justify-content:flex-end;">
					<view class="rtxt" style="color:#999999;" v-if="acshapedata.length <= 0">请选择车型</view>
					<view class="rtxt" style="color:#333;" v-if="acshapedata.length > 0">已选择</view>
					<uv-icon name="arrow-right" size="16" color="#999999"></uv-icon>
				</view>
			</view> -->
			<view class="careach flex">
				<view class="careach-title">预约时长</view>
				<view class="careach-r flex" style="justify-content: flex-end;">
					<view class="dureach durj" @click="jian">-</view>
					<view class="durnum">{{ durnum }}小时</view>
					<view class="dureach durjia" @click="jia">+</view>
				</view>
			</view>
			<!-- <view class="careach flex" @click="$refs.cartime.open()">
				<view class="careach-title">预约时间</view>
				<view class="careach-r flex" style="justify-content: flex-end;">
					<view class="rtxt" style="color:#999999;" v-if="!timevalac">请选择预约时间</view>
					<view class="rtxt" style="color:#333;" v-if="timevalac">{{ $uv.timeFormat(timevalac,'yyyy-mm-dd hh:MM') }}</view>
					<uv-icon name="arrow-right" size="16" color="#999999"></uv-icon>
				</view>
			</view> -->
			<view class="careach flex">
				<view class="careach-title">预约时间</view>
				<view class="careach-r flex" style="justify-content: flex-end;" @click="opensetime()">
					<view class="rtxt" style="color:#999999;" v-if="!timevaltimeac">请选择预约时间</view>
					<view class="rtxt" style="color:#333;" v-if="timevaltimeac">{{ timevaltimeac }}</view>
					<uv-icon name="arrow-right" size="16" color="#999999"></uv-icon>
				</view>
			</view>
			<view class="tip mainColor" v-if="tip" style="font-size:24rpx;line-height:50rpx;">{{ tip }}</view>
			<view class="careach flex" @click="openlocation()">
				<view class="careach-title">接送地址</view>
				<view class="careach-r flex" style="justify-content: flex-end;">
					<view class="rtxt" style="color:#999999;"  v-if="lng == ''">请选择接送地址</view>
					<view class="rtxt" style="color:#333;" v-if="lng != ''">已选择</view>
					<uv-icon name="arrow-right" size="16" color="#999999"></uv-icon>
				</view>
			</view>
			<view class="careach flex">
				<view class="raddress">
					<textarea class="raddresstext" placeholder="请输入详细地址" v-model="address"></textarea>
				</view>
			</view>
		</view>
		<view class="carmsg marginAuto">
			<view class="careach flex">
				<view class="careach-title">姓名</view>
				<view class="careach-r flex" style="justify-content: end;">
					<input class="rinput" type="text" v-model="name" placeholder="请输入姓名" />
				</view>
			</view>
			<view class="careach flex">
				<view class="careach-title">电话</view>
				<view class="careach-r flex" style="justify-content: end;">
					<input class="rinput" type="text" maxlength="11" v-model="mobile" placeholder="请输入电话" />
					<uv-icon name="edit-pen" size="22" color="#1686F8"></uv-icon>
				</view>
			</view>
			<!-- <view class="careach flex" >
				<view class="careach-title">备注</view>
			</view> -->
			<view class="careach flex">
				<view class="raddress">
					<textarea class="raddresstext" placeholder="请输入备注信息" v-model="remark"></textarea>
				</view>
			</view>
		</view>
		<view class="marginAuto" style="width:600rpx;margin-top:60rpx;">
			<uv-button text="提交" @click="enter()" :customStyle="{
				'background':'#1686F8',
				'color':'#ffffff',
				'font-size':'30rpx',
				'width':'600rpx',
				'height':'100rpx',
				'border-radius':'100rpx'
			}"></uv-button>
		</view>
		<!--  选择车型 -->
		<view class="bottompopup">
			<view class="zg" v-if="iscartype" @click="iscartype = false"></view>
			<view class="pup" :class="iscartype ? 'showtop':''" style="width:100%;">
				<view class="pupclose" @click="iscartype = false">
					<uv-icon name="close" size="22" color="#222222"></uv-icon>
				</view>
				<view class="puphead">选择车型</view>
				<view class="cartype marginAuto flex">
					<view class="cartypeeach"
					:class="item.ac ? 'activeeach mainBg' :''"
					@click="cartypefun(item,index)"
					v-for="(item,index) in shapedata" :key="index">{{ item.title }}</view>
				</view>
				<view class="marginAuto" style="width:600rpx;margin-bottom:60rpx;">
					<uv-button text="提交" @click="enteriscartype()" :customStyle="{
						'background':'#1686F8',
						'color':'#ffffff',
						'font-size':'30rpx',
						'width':'600rpx',
						'height':'100rpx',
						'border-radius':'100rpx'
					}"></uv-button>
				</view>
			</view>
		</view>
		<!-- 选择时间 -->
		<!-- <uv-datetime-picker ref="cartime" v-model="timeval" mode="datetime" :minDate="minDate" @confirm="cartimefun">
		</uv-datetime-picker> -->
		<uv-popup ref="yytime" mode="bottom" bgColor="none">
			<view class="yytimec">
				<!-- <view class="yytimectitle flex marginAuto">
					<view class="yytimecicon" style="margin-top:3rpx;" @click="jianmonthfun">
						<uv-icon name="arrow-left" color="#333333" size="28"></uv-icon>
					</view>
					<view class="yytimectxt">{{ timevalac }}</view>
					<view class="yytimecicon" style="margin-top:3rpx;" @click="jiamonthfun">
						<uv-icon name="arrow-right" color="#333333" size="28"></uv-icon>
					</view>
				</view> -->
				<!--  -->
				<view class="scrolllist marginAuto">
					<scroll-view class="scrollmain" scroll-x="true" @scroll="scroll" scroll-left="0">
						<view class="scrollmaineach" 
						:class="timevalac == item.date ? 'aceach':''" 
						v-for="(item,index) in datetime" :key="index"
						@click="datetimefun(item,index)">
							<view>{{ item.date.substr(5) }}</view>
							<view class="week" v-if="item.week == 0">周日</view>
							<view class="week" v-if="item.week == 1">周一</view>
							<view class="week" v-if="item.week == 2">周二</view>
							<view class="week" v-if="item.week == 3">周三</view>
							<view class="week" v-if="item.week == 4">周四</view>
							<view class="week" v-if="item.week == 5">周五</view>
							<view class="week" v-if="item.week == 6">周六</view>
						</view>
					</scroll-view>
				</view>
				
				<view class="yytimecmain marginAuto flex" v-if="jlid != ''">
					<view class="yytimeceach" 
					:class="item.type == 0 ? 'mainBg baiColor':''" 
					v-for="(item,index) in timedata" :key="index"
					@click="setime(item)"
					>
						<view>{{ item.time+':00' }}-{{ item.time+1+':00' }}</view>
						<view style="font-size:24rpx;">{{ item.type == 0 ? '空闲':'不可约' }}</view>
					</view>
				</view>
				
				<view class="yytimecmain marginAuto flex" v-if="jlid == ''">
					<view class="yytimeceach" style="background: #fff;"
					v-for="(item,index) in timedata" :key="index"
					@click="setime(item)"
					>
						<view>{{ item.time+':00' }}-{{ item.time+1+':00' }}</view>
					</view>
				</view>
			</view>
		</uv-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				apifun:this.apifun,
				uesrmsg:{},
				jlid:'',  // 教练直约的教练id，（有值：教练直约，无值：随机）
				mealid:'',   // 套餐id (必须)
				mealname:'',  // 套餐name
				mealorderid:'',  // 套餐的订单id
				orderid:'',  // 订单id，修改时用到
				durnum:2,
				// lng: '113.72443142361111',
				// lat: '34.69050835503472',
				lng: '',
				lat: '',
				city:'',
				address:'',
				name:'',
				mobile:'',
				remark:'',
				iscartype:false,
				shapedata:[],
				acshapedata:[],
				minDate:new Date().getTime()+10800000,  // 推迟三个小时
				timeval:'',
				timevalac:'',
				timevaltimeac:'',
				datetime:[],  // 日期
				timedata:[],
				acmealdata:{
					id:'',
					residue_duration:0,
				}, // 套餐详情数据
				reserveinfodata:{},  // 订单详情
				isenter:true,  //防抖
				tip:'',
			};
		},
		onLoad(option) {
			this.uesrmsg = uni.getStorageSync('usermsg');
			this.mobile = this.uesrmsg.mobile;
			this.orderid = option.orderid || '';
			this.mealid = option.mealid || '';
			this.mealname = option.menuname || '';
			this.jlid = option.jlid || '';
			this.mealorderid = option.mealorderid || '';
			// 再次预约需要--
			this.lng = option.lng || this.lng;
			this.lat = option.lat || this.lat;
			this.address = option.address || '';
			this.name = option.name || '';
			this.remark =  option.remark || '';
			// 再次预约需要结束--
			this.tipfun();
			this.pjinitdatafun();
			uni.$on('acmeal',(datas)=>{
				this.acmealdata = datas.data;
				this.mealname = datas.data.menu_name;
				this.mealid = this.acmealdata.menu_id;
				this.mealorderid = this.acmealdata.id;
			});
			if(this.mealid){
				this.getEscortMenuInfo()  // 套餐详情
			}
			if(this.orderid){
				this.cartypegetfun(()=>{  // 车型列表
					this.getreserveinfo()  // // 请求订单详情
				})  // 车型列表
			}else{
				this.cartypegetfun(()=>{})  // 车型列表
			}
		},
		methods: {
			// --选择预约时间
			opensetime(){
				this.$refs.yytime.open();
				let datetime = parseInt(new Date().getTime()/1000);
				this.timevalac = uni.$uv.date(datetime,'yyyy-mm-dd');
				this.getdutylist(this.timevalac);
				this.datetime=[];
				for(var i=0; i< 7; i++){
					let timeitem = datetime+(i*24*60*60);
					this.datetime.push({
						date:uni.$uv.date(timeitem,'yyyy-mm-dd'),
						week:new Date(timeitem*1000).getDay()
					})
				}
			},
			datetimefun(item,index){
				this.timevalac =item.date;
				this.getdutylist(this.timevalac);
			},
			setime(item){
				if(item.type == 0){
					this.timevaltimeac = this.timevalac+' '+item.time+':00';
					this.$refs.yytime.close();
				}else{
					this.apifun.toast('教练该时间段为忙碌,不可预约')
				}
			},
			
			jianmonthfun(){
				let dates = new Date();
				const hour = dates.getHours();
				const minutes = dates.getMinutes();
				let dqtime = new Date(this.timevalac+' '+hour+':'+minutes+':00').getTime();
				let dqtimes =new Date(parseInt(dqtime-86400000));
				this.showyer = dqtimes.getFullYear();
				this.showmonth = dqtimes.getMonth() + 1;
				this.showday = dqtimes.getDate();
				let timevalac = this.showyer+'-'+this.showmonth+'-'+this.showday;
				if(dqtime > dates.getTime()){
					this.timevalac = timevalac;
					this.getdutylist()
				}
			},
			jiamonthfun(){
				let dates = new Date();
				const hour = dates.getHours();
				const minutes = dates.getMinutes();
				let dqtime = new Date(this.timevalac+' '+hour+':'+minutes+':00').getTime();
				let dqtimes =new Date(parseInt(dqtime+86400000));
				this.showyer = dqtimes.getFullYear();
				this.showmonth = dqtimes.getMonth() + 1;
				this.showday = dqtimes.getDate();
				this.timevalac = this.showyer+'-'+this.showmonth+'-'+this.showday;
				this.getdutylist()
			},
			getdutylist(){
				let sendData = {
					partner_id:this.jlid || '',
					day:this.timevalac,  // 2028-04-25
				};
				this.apifun.unirequest('/api/partnerDrive/getDutyList','post',sendData,(res)=>{
					if(res.code == 200){
						this.timedata = res.data;
					}else{
						this.apifun.toast(res.msg)
					}
				})
			},
			// --
			tipfun(){
				this.apifun.unirequest('/api/index/getHint','post',{},(res)=>{
					if(res.code == 200){
						this.tip = res.data;
					}else{
						this.apifun.toast(res.msg);
					}
				})
			},
			enter(){
				let sendData = {
					id:this.orderid || '',  //  修改预约订单需要
					order_id:this.mealorderid || '',
					// shape_id:this.acshapedata.toString(),  // 已废弃-车型
					duration:this.durnum,
					time:this.timevaltimeac,
					lng:this.lng,
					lat:this.lat,
					address:this.address,
					username:this.name,
					mobile:this.mobile,
					remark:this.remark,
					partner_id:this.jlid || 0
				};
				// console.log(sendData)
				if(sendData.time == '' || sendData.lng=='' || sendData.lat==''
				|| sendData.address == '' || sendData.username == '' || sendData.mobile == ''){
					this.apifun.toast('请将信息补充完整');
					return false
				};
				if(!this.isenter){
					return false
				};
				this.isenter = false;
				this.apifun.unirequest('/api/partnerDrive/reserve','post',sendData,(res)=>{
					if(res.code === 200){
						let datas = res.data;
						this.apifun.toast('预约成功');
						setTimeout(()=>{
							this.isenter = true;
							this.apifun.navigate('/pages/my/mydriver','navac=2')
						},1500)
					}else{
						this.isenter = true;
						this.apifun.toast(res.msg)
					}
				})
			},
			pjinitdatafun(){  // 陪驾套餐列表
				let sendData = {
					type:1
				};
				this.apifun.unirequest('/api/partnerDrive/getMyPartnerDriveList','post',sendData,(res)=>{
					// console.log(res)
					if(res.code === 200){
						let datas = res.data;
						if(datas.data.length > 0){
							this.acmealdata = datas.data[0];
							if(datas.data[0].residue_duration > 0){
								this.mealid = datas.data[0].menu_id || 0;
								this.mealorderid = datas.data[0].id;
								this.mealname = datas.data[0].menu_name;
							}
						}
					}else{
						this.apifun.toast(res.msg)
					}
				})
			},
			jian(){
				let durnum = this.durnum;
				if(durnum <= 2){
					this.apifun.toast('已达到最小时长');
					return false
				}
				--durnum;
				this.durnum = durnum;
			},
			jia(){
				let durnum = this.durnum;
				++durnum;
				this.durnum = durnum;
			},
			cartypefun(acitem,index){  // 选择车类型
				// if(item.ac){
				// 	this.$set(item,'ac',false)
				// }else {
				// 	this.$set(item,'ac',true)
				// }
				this.shapedata.forEach((item,index)=>{
					this.$set(item,'ac',false)
				})
				this.$set(acitem,'ac',true)
			},
			enteriscartype(){  //  选择车类型
				this.acshapedata = [];
				this.shapedata.forEach((item,index)=>{
					if(item.ac){
						this.acshapedata.push(item.id)
					}
				});
				this.iscartype = false;
			},
			cartimefun(e){  // 选择时间
				this.timevalac = uni.$uv.timeFormat(e.value,'yyyy-mm-dd hh:MM');
			},
			openlocation(){  // 选择位置
				uni.chooseLocation({
					success: (res) => {
						console.log(res);
						this.city = res.name;
						this.address = res.address;
						this.lng = res.longitude;
						this.lat = res.latitude;
					}
				});
			},
			cartypegetfun(callback){  // 车型列表
				this.apifun.unirequest('/api/verifyCart/getCatShapeList','post',{},(res)=>{
					if(res.code === 200){
						let datas = res.data;
						this.shapedata = datas;
						callback();
					}else{
						this.apifun.toast(res.msg)
					}
				})
			},
			getEscortMenuInfo(){  // 套餐详情
				let sendData = {
					id:this.mealid
				};
				this.apifun.unirequest('/api/partnerDrive/getEscortMenuInfo','post',sendData,(res)=>{
					if(res.code === 200){
						let datas = res.data;
						this.acmealdata = datas;
						this.mealid = datas.id;
						this.mealname = datas.name;
					}else{
						this.apifun.toast(res.msg)
					}
				})
			},
			getreserveinfo(){
				let sendData = {
					id:this.orderid
				};
				this.apifun.unirequest('/api/partnerDrive/getReserveInfo','post',sendData,(res)=>{
					if(res.code === 200){
						let datas = res.data;
						this.reserveinfodata = datas;
						this.jlid = datas.partner_id;
						this.acshapedata = datas.shape_id;  // 车型
						this.durnum = datas.duration;
						this.timevalac = datas.reserve_time;
						this.lng =  datas.lng;
						this.lat =  datas.lat;
						this.address = datas.address;
						this.name = datas.username;
						this.mobile = datas.mobile;
						this.remark = datas.remark;
						if(datas.shape_id){
							let shapeid =datas.shape_id.split(',');
							this.shapedata.forEach((item,index)=>{
								shapeid.forEach((items,indexs)=>{
									if(item.id == items){
										this.$set(item,'ac',true)
									}
								})
							})
						}
					}else{
						this.apifun.toast(res.msg)
					}
				})
			},
			scroll(){
				
			}
		},
	};
</script>

<style scoped lang="scss">
	@import '../../public/popupb.scss';
	.carmsg{
		width: 650rpx;
		padding:0 20rpx;
		background: #fff;
		border-radius: 10rpx;
		margin-top: 20rpx;
		.careach{
			width: 100%;
			justify-content: space-between;
			padding: 20rpx 0;
			border-bottom: 1px solid #F9F9F9;
			.careach-title{
				font-size: 30rpx;
				color: #222222;
				line-height: 60rpx;
			} 
			.careach-r{
				width: 50%;
				line-height: 60rpx;
				.rinput{
					width:100%;
					text-align: right;
					font-size:30rpx;
					color:#333;
					line-height: 60rpx;
				}
				.carstatus{
					color: #333333;
					font-size: 30rpx;
					.carstatustxt{
						margin-left: 20rpx;
					}
				}
				.dureach{
					width: 60rpx;
					height: 60rpx;
					line-height: 60rpx;
					background:#DFF1FF;
					border-radius:18rpx;
					text-align: center;
					color:#0089FB;
					font-size:40rpx;
				}
				.durnum{
					width:100rpx;
					text-align: center;
					line-height: 60rpx;
					color:#222222;
					font-size: 30rpx;
				}
			}
			.raddress{
				width:92%;
				padding: 20rpx 4%;
				height: 100rpx;
				background: #F6F6F6;
				border-radius: 20rpx;
				.raddresstext{ 
					width: 100%;
					height: 100rpx;
					line-height:40rpx;
					color: #333;
					font-size: 24rpx;
				}
			}
		}
	}
	// --车类型
	.cartype{
		width: 90%;
		min-height:300rpx;
		padding: 30rpx 0;
		justify-content: space-between;
		flex-wrap: wrap;
		.cartypeeach{
			width: 216rpx;
			height: 100rpx;
			line-height: 100rpx;
			text-align: center;
			background:#F4F4F4;
			color:#222222;
			font-size: 30rpx;
			border-radius:10rpx;
			margin-bottom: 20rpx;
		}
		.activeeach{
			color: #fff;
		}
	}
	// 时间
	.yytimec{
		width: 100%;
		background: #fff;
		border-top-right-radius: 20rpx;
		border-top-left-radius: 20rpx;
		padding: 40rpx 0 20rpx;
		.yytimectitle{
			width: 350rpx;
			height: 60rpx;
			line-height:60rpx;
			color: #333;
			font-size:36rpx;
			justify-content: space-between;
		}
		.yytimecmain{
			width: 690rpx;
			flex-wrap: wrap;
			margin-top:20rpx;
			.yytimeceach{
				width:200rpx;
				padding:10rpx 0rpx;
				border: 1px solid #ccc;
				text-align: center;
				border-radius: 10rpx;
				margin:5rpx 10rpx;
				font-size: 28rpx;
				color: #333333;
				background:#ccc;
			}
			.acbusy{
				color: #fff;
				background:#E43F31;
			}
		}
	}
	// 时间
	.scrolllist{
		width: 690rpx;
		.scrollmain {
			white-space: nowrap;
			width: 100%;
			.scrollmaineach {
				display: inline-block;
				margin: 0 20rpx;
				height:90rpx;
				line-height:40rpx;
				color: #666666;
				font-size:28rpx;
				text-align: center;
				.week{
					font-size: 24rpx;
				}
			}
			.aceach{
				color: #FF5014;
				border-bottom: 2px solid #FF5014;
			}
		}
	}
</style>